<template>
	<view class="content">
		<view class="mechanism_title">
			<image :src="imageUrl+detail.shopCover" style="width: 117rpx;height: 117rpx;margin-right: 28rpx;" mode="">
			</image>
			<view class="mechanism_rt">
				<view class="mechanism_rt_item">
					<text>{{detail.shopTitle}}</text>
					<image @click="housesOperation(detail.id)"
						:src="detail.isHouses?'../../static/img/Collection_out.png':'../../static/img/Collection_in.png'"
						style="width:27rpx;height: 27rpx;" mode="">
					</image>
				</view>
				<view class="mechanism_rt_item">
					<!-- ../../static/img/Collection_in.png -->
					<image src="../../static/img/place.png" style="width:18rpx;height: 21rpx;margin-right: 10rpx;"
						mode=""></image>
					<text>{{detail.mechanismAddress||''}}</text>

				</view>
				<view class="price">
					<text>￥{{detail.shopOriginalPrice}}</text>
					<text>已报{{detail.shopBuyNumbers||0}}人</text>
				</view>
			</view>
		</view>
		<view class="survey_box">
			<view class="survey_title">
				品牌概况
			</view>
			<view class="survey_detail">
				<text class="survey_label">课程类型</text>
				<view class="survey_content">
					<text class="search_label" style="margin-right: 12rpx;">{{detail.shopCategory}}</text>

				</view>
			</view>
			<view class="survey_detail">
				<text class="survey_label">课程节数</text>
				<view class="survey_content">
					{{detail.shopSectionNumbers}}节
				</view>
			</view>
			<view class="survey_detail">
				<text class="survey_label">课程大纲</text>
				<view class="survey_content">
					<text class="kc_name" v-if="detail.catalog.length" v-for="(item,index) in detail.catalog"
						:key="index">{{item}}</text>

				</view>
			</view>
			<view class="survey_detail">
				<text class="survey_label">适合年龄</text>
				<view class="survey_content">
					{{detail.mechanismAges}}
				</view>
			</view>
			<view class="survey_detail">
				<text class="survey_label">报名费用</text>
				<view class="survey_content">
					原价￥{{detail.shopOriginalPrice}}，回馈价￥{{detail.shopDiscountPrice}}
				</view>
			</view>


		</view>
		<view class="adviser_box">
			<view class="survey_title">
				品牌概况
			</view>
			<view class="occupancy_list_item">
				<image :src="detail.teacherEntity.adviserCover" mode=""
					style="width:100rpx;height:100rpx;border-radius: 50%;">
				</image>
				<view class="occupancy_rt">

					<view class="search_label">
						<view class="search_label_lf">
							<view>{{detail.teacherEntity.adviserName}}</view>
							<view>{{detail.teacherEntity.adviserPhone}}</view>
						</view>
						<view class="consulting" @click="callNum(detail.teacherEntity.adviserPhone)">
							一键联系
						</view>
					</view>



				</view>

			</view>
		</view>
		<view class="adviser_box" v-if="groupWorkAuctionList.length">
			<view class="survey_title">
				{{groupWorkAuctionList.length}}人正在拼团，可直接参与
			</view>
			<view class="pt_content">
				<view class="pt_item" v-for="(item,index) in groupWorkAuctionList" :key="index">
					<view class="img_box">
						<image :src="item.userHeadPortrait" mode=""></image>
						<text>{{item.userName}}</text>
					</view>
					<view class="start_box">
						<view class="start_box_person">
							<view class="cha_num">
								还差<text>{{item.orderNums}}人</text>拼成
							</view>
							<!-- <view class="cha_num">
								剩余23:56:51
							</view> -->
							<liveTimeCount :startTime="item.endTime"></liveTimeCount>
						</view>
						<view class="pt_btn" @click="goPt(item)">
							去拼团
						</view>
					</view>


				</view>
			</view>
		</view>
		<view class="comment_box">
			<view class="survey_title">
				家长访客互动区
			</view>
			<view class="comment_content" v-if="commentList.length" v-for="(item,index) in commentList" :key="index">
				<image src="../../static/img/nav/my-active.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				<view class="comment_rt">
					<view class="header_name">
						<view class="header_lf">
							<view>
								{{item.userName}}
							</view>
							<uni-rate :size="13" readonly="true" :value="item.commentScore||0" />
						</view>
						<text>{{item.createTime}}</text>
					</view>
					<view class="comment_font">
						{{item.comment}}
					</view>
					<view class="comment_icon">
						<view @click="openModule(item.id,item.id)">
							<uni-icons type="chat" size="15" color="#393939"></uni-icons>
							<text>{{item.commentNums}}</text>
						</view>
						<view>
							<image :src="item.zanImg" style="width: 26rpx;height: 26rpx;" @click="dianZanFun(item.id)"
								mode="">
							</image>
							<text>{{item.commentThumbs}}</text>
						</view>

					</view>
					<view class="reply_box" v-if="item.commentNums" v-for="(reply,index) in item.interactionBos"
						:key="index" >
						<text>{{reply.userName}}</text>
						<text>回复</text>
						<text>{{reply.applyUserName}}:</text>
						<text>{{reply.interaction}}</text>

					</view>
				</view>
			</view>

			<view >
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>

		</view>
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="reportFun"
			@buttonClick="buttonClick" />
		<!-- 回复 -->
		<view class="pay_box" v-if="isShowShare">
			<view class="module_box" @click.self="closeModule()">

			</view>

			<view class="share_content">
				<view class="report_input">
					<view class="report_input_title">
						<text>详细信息描述</text>
						<text>{{comment.length}}/100</text>
					</view>
					<textarea maxlength="100" v-model="comment" placeholder="请详细描述您的评论内容" />
				</view>
				<view class="pay_btn" @click="submitFun()">
					<text>确定</text>

				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pay_box" v-if="isShowPay">
			<view class="module_box" @click="isShowPay=false">

			</view>
			<view class="pay_content" style="height: 620rpx;">
				<uni-icons type="close" size="15" style="position: absolute;top:40rpx;right: 30rpx;"
					@click="isShowPay=false"></uni-icons>
				<view class="mechanism_title">
					<image :src="imageUrl+detail.shopCover" style="width: 117rpx;height: 117rpx;" mode=""></image>
					<view class="mechanism_rt">
						<view class="mechanism_rt_item">
							<text>{{detail.shopTitle}}</text>
							<!-- <image src="../../static/img/Collection_in.png" style="width:27rpx;height: 27rpx;" mode=""></image> -->
						</view>
						<view class="mechanism_rt_item">

							<image src="../../static/img/place.png"
								style="width:18rpx;height: 21rpx;margin-right: 10rpx;" mode=""></image>
							<text>{{detail.mechanismAddress}}</text>
						</view>
					</view>
				</view>
				<view class="form_box">
					<view class="form_item">
						<view>
							<image src="../../static/img/wxPay.png"
								style="width: 44rpx;height: 38rpx;margin-right: 40rpx;" mode=""></image>
							<text style="font-size: 28rpx;font-weight: 500;color: #333;">微信支付</text>
						</view>
						<icon type="success_no_circle" size="22" />

					</view>
					<!-- <view class="form_item">
						<view>
							<image src="../../static/img/zfbPay.png"
								style="width: 44rpx;height: 38rpx;margin-right: 40rpx;" mode=""></image>
							<text style="font-size: 28rpx;font-weight: 500;color: #333;">支付宝支付</text>
						</view>

					</view> -->
				</view>

				<view class="pay_btn" @click.stop="startPay">
					<text>￥{{detail.shopDiscountPrice}}</text>
					<text>立即支付</text>
				</view>
			</view>
		</view>
		<!-- 打电话 -->
		<view class="pay_box" v-if="isShowPhone">
			<view class="module_box" @click="isShowPhone=false">

			</view>
			<view class="phone_box">
				<view class="phone_box_item">
					{{detail.teacherEntity.adviserPhone}}
				</view>
				<view class="phone_box_item" @click="callPhone(detail.teacherEntity.adviserPhone)">
					呼叫
				</view>
				<view class="pay_btn" style="margin-top: 36rpx;background-color: #E6E6E6;" @click="isShowPhone=false">
					<text style="margin:0;color: #333333;">取消</text>

				</view>
			</view>
		</view>
		<!-- 分享 -->
		<view class="pay_box" v-if="isShowShareBox">
			<view class="module_box" @click="isShowShareBox=false">

			</view>
			<view class="share_content_type">
				<view class="share_style">
					<button type="primary" open-type="share" data-name="pageShare" id="share">
						<view class="style_out">
							<uni-icons type="weixin" color="#fff" size="30"></uni-icons>
						</view>
						<text>微信好友</text>
					</button>
					<view class="share_wx" @click="openHaibao">
						<view class="style_out">
							<uni-icons type="images-filled" color="#fff" size="30"></uni-icons>
						</view>
						<text>生成海报</text>
					</view>
				</view>
				<view class="pay_btn" style="margin-top: 0;background-color: #E6E6E6;" @click="isShowShareBox=false">
					<text style="margin:0;color: #333333;">取消</text>

				</view>
			</view>
		</view>
		<!-- 海报 -->
		<view class="haibao" v-if="isHaibao">
			<view class="haibao_content">
				<image :src="imageUrl+detail.shopPoster" mode="aspectFit" @click="bigImg(imageUrl+detail.shopPoster)">
				</image>
				<view class="want_Application_out">
					<view class="want_Application" @click="saveEwm" v-if="openSettingBtnHidden">
						保存到相册
					</view>
					<button v-else class="purple_btn btn_box" hover-class="none" open-type="openSetting"
						@opensetting='handleSetting'>保存到相册</button>
					<view class="want_Application_cancle" @click="this.isHaibao=false;">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import liveTimeCount from "../component/liveTimeCount.vue"
	export default {
		data() {
			return {
				id: "",
				isHaibao:false,
				detail: {},
				imageUrl: "",
				pageRow: 1,
				pageSize: 10,
				commentList: [],
				isShowShare: false,
				isShowShareBox: false,
				isShowPay: false, //支付方式控制
				comment: "",
				zanImg: "../../static/img/zan_out.png",
				options: [{
					icon: '../../static/img/jb.png',
					text: '举报'
				}, {
					icon: '../../static/img/phone.png',
					text: '电话',

					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: '../../static/img/share.png',
					text: '分享',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}],
				buttonGroup: [{
						text: '发起评论',
						backgroundColor: 'linear-gradient(61deg, #FEB621, #FCCA74)',
						color: '#fff'
					},
					{
						text: '我要报课',
						backgroundColor: '#4FC863',
						color: '#fff'
					}
				],
				clickId: '', //当前评论的id
				applyUserId: "", //二级回复id
				cityCode: "110101",
				isShowPhone: false, //呼叫电话控制	
				phoneNum: "", //电话号码
				isActivity: false, //是否活动购买
				ptType: "", //拼团类型
				type: "", //type:1秒杀，2拼团 3砍价
				groupWorkAuctionList: [],
				isPay: '',
				openSettingBtnHidden: true, //是否授权
				ewmImg: "" ,//这是要保存的图片
				isLoading: false, // 是否在加载数据
				isLoadMore:false,
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
			}
		},
		onLoad(data) {
			//type:1秒杀，2拼团 3砍价
			//ptType :拼团类型 0正在拼团 1马上开团
			this.id = data.id;
			this.type = data.type;
			this.ptType = data.ptType;
			this.isPay = data.isPay; //是否已购买
			if (data.type) {
				this.isActivity = true;
			} else {
				this.isActivity = false;
			}
			
		},
		onReachBottom() { //上拉触底函数
		console.log(this.isLoadMore)
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.loadStatus='loading';
				this.pageRow += 1
				this.gieCommentList();
			}
			
		},
		components: {
			liveTimeCount
		},
		
		onShow() {
			this.getDetail();
			this.gieCommentList();
			this.groupWorkAuction()
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			callPhone(num){
				 uni.makePhoneCall({
				 	
				 // 手机号
				    phoneNumber:num, 
				// 成功回调
				success: (res) => {
				console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
				console.log('调用失败!')
				},
				})
			},
			openHaibao(){
				this.isShowShareBox=false;
				let imgArr = [];
				imgArr.push(this.imageUrl+this.detail.shopPoster);
				uni.showToast({
					title: "请长按保存海报",
					icon: "none",
					success:function(){
						uni.previewImage({
							urls: imgArr,
							current: imgArr[0],
						    success:()=>{
								
							}
								
						});
					}
				});
				
				
				// this.isHaibao=true;
			},
			//微信小程序保存到相册
			handleSetting(e) {
				if (!e.detail.authSetting['scope.writePhotosAlbum']) {
					this.openSettingBtnHidden = false;
				} else {
					this.openSettingBtnHidden = true;
				}
			},
			saveEwm: function(e) {
				let _self=this;
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									_self.saveImgToLocal();
								},
								fail() { //这里是用户拒绝授权后的回调
									_self.openSettingBtnHidden = false
								}
							})
						} else { //用户已经授权过了
							_self.saveImgToLocal();
						}
					}
				})
			},
			saveImgToLocal: function(e) {
                let _self=this;
				console.log(_self.imageUrl+_self.detail.shopPoster)
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function(res) {
						if (res.confirm) {

							uni.downloadFile({
								url: _self.imageUrl+_self.detail.shopPoster, //图片地址
								  header: { 'Content-type': 'image/jpg' },
								success: (res) => {
									if (res.statusCode === 200) {
										console.log(res)
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function(err) {
												console.log(err)
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									}
								}
							})


						} else if (res.cancel) {

						}
					}
				});

			},
			//查看大图
			bigImg(img) {
				// 预览图片
				let imgArr = [];
				imgArr.push(img);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]

				});
			},
			//获取拼团列表
			groupWorkAuction() {
				this.$http.get('/api/shop/groupWorkAuction', {
					areaCode: this.cityCode,
					moldId: this.id,
					pageRow: this.pageRow,
					pageSize: this.pageSize
				}).then((data) => {
					if (data.data.code == 200) {
						let arr = data.data.result.records || [];
						if (arr.length) {
							this.groupWorkAuctionList = arr.filter((a, i) => {
								return new Date(a.endTime).getTime() > new Date().getTime()
							})
						}

					} else {
						this.groupWorkAuctionList = []
					}
				})
			},

			//支付方式关闭
			closePay() {
				this.isShowPay = false;
			},
			//一键联系
			callNum(num) {
				this.phoneNum = num;
				this.isShowPhone = true;
			},
			buttonClickBack(id) {
				uni.navigateTo({
					url: '../subjectSub/comment?id=' + id
				});
			},
			//举报
			reportFun(e) {
				if (e.index == 0) {
					uni.navigateTo({
						url: '../subjectSub/report?id=' + this.id
					});
				} else if (e.index == 1) {
					this.isShowPhone = true;
				} else {
					this.isShowShareBox = true;
				}

			},
			submitFun() {

				this.$http.post('/api/user/replyUserComment', {
					areaCode: this.cityCode,
					"commentId": this.clickId,
					"interaction": this.comment,
					"interactionId": this.applyUserId
				}, 'application/json').then((data) => {
					console.log(data.data.code)
					if (data.data.code == 200) {
						uni.showToast({
							title: '回复成功',
							icon: "success",
							duration: 2000,

						});
						setTimeout(() => {
							this.isShowShare = false;
							this.gieCommentList();
						}, 1000)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				}).catch(() => {
					uni.showToast({
						title: '回复失败',
						icon: "none",
						duration: 2000,

					});
				})
			},
			//回复
			openModule(id, applyUserId) {
				console.log(id, applyUserId)
				this.clickId = id;
				this.applyUserId = applyUserId;
				this.isShowShare = true;
				this.comment = "";

			},
			//关闭回复弹窗
			closeModule(e) {
				this.isShowShare = false;

			},
			//点赞
			dianZanFun(id) {
				this.$http.get('/api/user/thumpsComment/' + id).then((data) => {
					if (data.data.code == 200) {

						this.gieCommentList();
					} else {
						this.zanImg = "../../static/img/zan_out.png"
					}
				})
			},
			//发起评论
			buttonClick(e) {
				if (e.index == 0) {
					uni.navigateTo({
						url: '../subjectSub/comment?id=' + this.id + '&type=' + 0
					});
				} else if (e.index == 1) { //我要报课
					
					
						this.isShowPay = true;
						this.isCanTuan = false; //不是参团
					

					// if(this.isActivity){//活动购买  1秒杀 2拼团 3砍价
					// 	this.auctionBuy(this.type)
					// }else{//正常购买
					// 	this.buy(0)
					// }
				}

			},
			//去拼团
			goPt(item) {
				this.isShowPay = true;
				this.isCanTuan = true; //参团
				this.ptData = item; //点击的
				// this.$http.post('/api/order/orderToken',{

				// },"application/json").then((data)=>{
				// 	if(data.data.code==200){
				// 		//拼团
				// 			this.auctionBuy(2,0)

				// 	}
				// })
			},
			//开始支付
			startPay() {
				this.$http.post('/api/order/orderToken', {

				}, "application/json").then((data) => {
					if (data.data.code == 200) {
						if (this.isActivity) { //活动购买  1秒杀 2拼团 3砍价
							if (this.type == 1 || this.type == 3) {
								this.auctionBuy(this.type)
							} else if (this.type == 2) {
								if (this.isCanTuan) { //参团
									this.auctionBuy(this.type, 0)
								} else { //开团
									this.auctionBuy(this.type, 1)
								}

							}

						} else { //正常购买
							this.buy(0)
						}
					}
				})

			},
			//微信支付
			wxPayment(result) {
				var _that = this;

				wx.requestPayment({
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					signType: 'MD5',
					paySign: result.sign,
					success: function(res) {
						uni.showToast({
							title: "报课成功",
							icon: 'success',
							mask: true
						})
						that.isShowPay = false;
					},
					fail: (res) => {
						console.log(res)
						uni.showToast({
							title: "支付失败，请重试！",
							icon: 'none',
							mask: true
						})
					},
					complete: () => {
						_that.loading = false;
					}
				})
			},
			//活动支付
			auctionBuy(type, ptType) {
				let params = {};
				//活动购买  1秒杀 2拼团 3砍价
				if (type == 1) {
					params = {
						"id": this.id,
						"type": type
					}
				} else if (type == 2) {
					if (ptType == 0) { //正在拼团
						params = {
							auctionType: 1,
							"id": this.id,
							orderId: this.ptData.orderId,
							"type": type
						}
					} else if (ptType == 1) { //马上开团
						params = {
							auctionType: 0,
							"id": this.id,
							"type": type
						}
					}
				} else if (type == 3) {
					params = {
						"id": this.id,
						"type": type
					}
				}
				this.$http.post('/api/order/auctionBuy', {
					...params
				}, "application/json").then((data) => {
					if (data.data.code == 200) {
						let result = JSON.parse(data.data.result);
						console.log(result);
						this.wxPayment(result)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				})
			},
			//正常支付接口
			buy(type) {
				let params = {};
				if (!type) { //正常购买
					params = {
						"id": this.id,
						"type": type
					}
				}

				this.$http.post('/api/order/buy', {
					...params
				}, "application/json").then((data) => {
					if (data.data.code == 200) {
						let result = JSON.parse(data.data.result);
						console.log(result);
						this.wxPayment(result)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				})
			},
			//获取评论列表
			gieCommentList() {
				this.$http.get('/api/mechanism/commentList', {
					areaCode: this.cityCode,
					commentType: 0,
					id: this.id,
					pageRow: this.pageRow,
					pageSize: this.pageSize
				}).then((data) => {
					if (data.data.code == 200) {
						if(this.pageRow!=1){
							this.commentList=this.commentList.concat(data.data.result.records);
						}else{
							this.commentList = data.data.result.records || [];
						}
						
						if (this.commentList.length) {
							this.commentList.forEach((a, i) => { //这里需要处理是否点赞
								a.zanImg = "../../static/img/zan_out.png"
							})
						}
						this.imageUrl=data.data.imageUrl;
						if (data.data.result.records.length) {
							if (data.data.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore';
								
							} else {
								this.isLoadMore = false;
								this.loadStatus = 'more';
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					}
				}).catch(()=>{
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			},
			//收藏操作
			housesOperation(id) {
				this.$http.get('/api/user/userHousesOperation', {
					id: id,
					type: 0
				}).then((data) => {
					if (data.data.code == 200) {
						uni.showToast({
							title: '收藏成功!',
							icon: "success",
							duration: 2000,

						});
						this.getDetail();
					}
				})
			},
			//获取评论列表
			// curriculumDetailComment(){
			// 	this.$http.get('/api/shop/curriculumDetailComment/'+this.id).then((data)=>{
			// 		if(data.data.code==200){
			// 			this.CommentList=data.data.
			// 		}
			// 	})
			// },
			//获取详情
			getDetail() {
				this.$http.get('api/shop/curriculumDetail/' + this.id).then((data) => {
					if (data.data.code == 200) {
						this.imageUrl = data.data.imageUrl;
						this.detail = data.data.result;
					} else {
						this.detail = {};
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/curriculum.scss'
</style>
